<template>
	<view class="page">
		<u-grid :border="false" :col="2">
			<u-grid-item v-for="(item,index) in list" :key="index">
				<view class="item" @click="toDetail(item)">
					<view class="header">
						<image :src="item.image" mode="aspectFill"></image>
						<view class="header_box flex_r_between">
							<view class="address" v-if="item.active_address">{{ item.active_address }}</view>
							<view class="status orange flex_r_around" v-if="item.status == 1">
								<text>审核中</text>
							</view>
							<view class="status green flex_r_around" v-if="item.status == 2">
								<text>已发布</text>
							</view>
							<view class="status red flex_r_around" v-if="item.status == 3">
								<text>已拒绝</text>
							</view>
						</view>
						<view class="tags flex_center">
							<text>{{ item.tags ? item.tags.replaceAll(',','/') : '' }}</text>
						</view>
					</view>

					<view class="name hidden_2">
						{{ item.title || '' }}
					</view>

					<view class="user flex_r_between">
						<view class="left flex_center">
							<image :src="item.avatar" mode="aspectFill"></image>
							<text class="hidden">{{ item.nickname }}</text>
						</view>
						<view class="right flex_r_around" v-if="Number(item.active_price) > 0">
							￥{{ item.active_price }}
						</view>
						<view class="right flex_r_around" v-else>
							免费
						</view>
					</view>

				</view>
			</u-grid-item>
		</u-grid>

		<view style="background: transparent;" v-if="!list.length && total == 0">
			<empty></empty>
		</view>
		<view style="background: transparent;" v-if="!list.length && total == 1">
			<loading></loading>
		</view>

	</view>
</template>

<script>
	import empty from '@/compentents/empty/empty.vue';
	import loading from '@/compentents/loading/loading.vue';
	export default {
		name: 'artice',
		props: {
			circle_id: {
				type: Number,
				default: 0,
			}
		},
		components: {
			empty,
			loading
		},
		data() {
			return {
				list: [],
				page: 1,
				total: 1
			}
		},
		methods: {

			toDetail(item) {
				this.$util.toUrl(`/pages/circle/active/active?id=${item.id}&circle_id=${this.circle_id}`);
			},

			getList() {
				this.$get('/circle.loyou/getLoyouPendingReviewList', {
					circle_id: this.circle_id,
					page: this.page
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},

			onReach() {
				if (this.total > this.list.length) {
					this.page++;
					this.getList();
				}
			},

			refList() {
				this.list = [];
				this.total = 1;
				this.page = 1;
				this.getList();
			},

		},

		created() {
			this.getList();
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .u-grid-item--hover-class {
		opacity: 1;
	}


	.page {
		padding: 16rpx 8rpx;
		min-height: 100vh;
		background: #F1F1F1 !important;
	}

	.item {
		width: 352rpx;
		height: 660rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		overflow: hidden;
		margin: 0 8rpx 16rpx;
		overflow: hidden;

		.header {
			width: 352rpx;
			height: 460rpx;
			overflow: hidden;
			position: relative;

			image {
				width: 352rpx;
				height: 460rpx;
			}
			
			.header_box {
				position: absolute;
				top: 20rpx;
				left: 0;
				padding: 0 24rpx;
				width: 100%;
				.address {
					background: #00D7A7;
					border-radius: 8rpx;
					padding: 4rpx 12rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 32rpx;
				}
				.status {
					width: 128rpx;
					height: 48rpx;
					border-radius: 12rpx;
					backdrop-filter: blur(3px);
					text {
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
				
				.green {
					background: rgba(0, 215, 167, 0.6);
				}
				
				.red {
					background: rgba(253, 42, 83, 0.6);
				}
				
				.orange {
					background: RGBA(232, 119, 92, 0.6);
				}
			}

			


			.tags {
				width: 352rpx;
				padding: 12rpx 16rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);

				text {
					flex: 1;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

		}

		.name {
			margin: 24rpx 16rpx 12rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
		}

		.user {
			margin: 0 16rpx;
			overflow: hidden;

			.left {
				flex: 1;
				overflow: hidden;
				image {
					width: 48rpx;
					height: 48rpx;
					border-radius: 24rpx;
					margin-right: 12rpx;
					flex-shrink: 0;
				}

				text {
					font-size: 24rpx;
					color: #666666;
					flex: 1;
				}

			}

			.right {
				font-weight: 600;
				font-size: 32rpx;
				color: #FD2A53;
			}
		}

	}
</style>